<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="图片详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <!-- 图片详情 -->
    <div>
      <div class="header">
        <h1>{{ imginfo.title }}</h1>
        <p>
          <span>发布时间:{{ imginfo.add_time | fmt }}</span>
          <span>{{ imginfo.click }}次浏览</span>
        </p>
      </div>
      <div class="mid">
        <img v-for="(item,index) in imglist" :key="item.src" class="preview-img"
         @click="$preview.open(index,imglist)"
          :src="item.src"
          alt=""
        />
       
      </div>
      <div class="main" v-html="imginfo.content"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imglist: [],
      imginfo: {},
    };
  },
  methods: {
    getImgInfo(imgid){
        // 获取图片详情
        this.$http.get('http://210.21.98.31:6007/api/getimageInfo/'+imgid).then(res=>{
            let list = res.data.message;
            this.imginfo = list && list.length>0 && res.data.message[0];
        })
    },
    getImgList(imgid){
        // 获取缩略图
        this.$http.get('http://210.21.98.31:6007/api/getthumimages/'+imgid).then(res=>{
            // 为了兼容 vue-preview图片预览组件，需要在数据上增加 w=375 和 h = 667
            let arr = res.data.message;
           let newArr =  arr.map(item => ({
                src:item.src,  
                w: 600,
                h: 400          
            }));

            this.imglist = newArr;
        })
    }
  },
  mounted() {
    let imgid = this.$route.params.imgid;
    this.getImgInfo(imgid);
    this.getImgList(imgid);
  }
};
</script>

<style scoped>
.mid img {
  height: 109px;
  width: 109px;
  margin-left: 5px;
}

.header {
  margin: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.header h1 {
  color: #0088d1;
  font-size: 1rem;
  margin: 0 10px;
}

.header p {
  font-size: 12px;
  color: #999;
  margin: 10px 10px;
}

.header p span:last-child {
  margin-left: 10px;
}

.main {
  padding: 5px;
  font-size: 0.8rem;
  color: #5c5c5c;
}
</style>
